<template>
  <div>
    <el-container>
      <el-main>
        <el-card class="box-card" :v-model="ArticlesFrom">
          <!-- 文章标题模块 -->
          <div slot="header" class="clearfix" style="text-align: center">
            <span style="margin-right: 24px; font-size: 24px">
              {{ ArticlesFrom.articleName }}</span
            >
            <el-button
              style="float: left; padding: 3px 0"
              type="text"
              @click="goBack"
              >返回</el-button
            >
          </div>
          <div style="height: 100%">
            <el-input
              type="textarea"
              v-model="ArticlesFrom.articleContent"
              v-html="ArticlesFrom.articleContent"
              readonly="readonly"
              class="input-sty"
              size="medium"
            >
            </el-input>
          </div>
          <div style="text-align: right">
            <span>
              <el-badge
                :value="this.ArticlesUserFrom.UserlikeCount"
                class="item"
              >
                <el-button size="small" @click="Userlike()">点赞</el-button>
              </el-badge>

              <el-badge
                :value="this.ArticlesUserFrom.ArticlesRead"
                class="item"
              >
                <el-button size="small">浏览量</el-button>
              </el-badge>

              <el-badge
                :value="this.ArticlesUserFrom.CommentCounts"
                class="item"
                type="primary"
              >
                <el-button size="small">评论</el-button>
              </el-badge>
            </span>
          </div>
          <!-- 分割线 -->
          <div
            style="
              border-bottom: solid 1px rgb(236, 236, 236);
              margin-top: 1rem;
            "
          ></div>

          <div>
            <h4 style="font-size: 24px; font-weight: 400; margin-bottom: 1rem">
              <span style="margin-left: 1rem"> 就爱跟帖 </span>
            </h4>

            <!-- v-if -->

            <div style="margin-top: 15px" v-show="i_show" @click="changeShow">
              <table style="width: 100%" cellspacing="0  ">
                <tr style="background-color: white">
                  <td colspan="2">
                    <el-input
                      placeholder="想法转瞬即逝，赶紧记下来"
                      v-model="CommentsEvery.CommentContent"
                      style="width: 100%; border-radius: 1rem"
                      class="publish-if-sty"
                    >
                    </el-input>
                  </td>
                  <td class="comment_sty1">评论</td>
                </tr>
                <tr
                  class=""
                  style="
                    border-spacing: 0;
                    background-color: #eeeeeed5;
                    padding: 0px;
                  "
                ></tr>
              </table>

              <span style="color: #999; font-size: 12px">
                网友评论仅供其表达个人看法，并不表明就爱立场。
              </span>
            </div>
            <!-- v-else -->

            <div style="margin-top: 15px" v-show="e_show">
              <table style="width: 100%" cellspacing="0  ">
                <tr style="background-color: white">
                  <td colspan="2">
                    <el-input
                      placeholder="想法转瞬即逝，赶紧记下来"
                      v-model="CommentsEvery.CommentContent"
                      style="width: 100%; border-radius: 1rem"
                      class="publish-else-sty"
                    >
                    </el-input>
                  </td>
                </tr>
                <tr
                  class=""
                  style="
                    border-spacing: 0;
                    background-color: #eeeeeed5;
                    padding: 0px;
                  "
                >
                  <td
                    style="width: 0rem; padding-left: 8px; text-align: center"
                  >
                    <div>
                      <el-avatar :src="url" style="float: left"></el-avatar>
                    </div>
                  </td>
                <td style="width: 8%">{{loginUserName}}</td>
                  <td>
                    <el-link
                      type="primary"
                      style="margin: 1rem; margin-left: 2rem"
                      @click="clickExit"
                      >退出</el-link
                    >
                    <span style="color: #999"> | &nbsp; </span>
                  </td>
                  <td class="comment_sty2" @click="CommentOne()">评论</td>
                </tr>
              </table>

              <span style="color: #999; font-size: 12px">
                网友评论仅供其表达个人看法，并不表明就爱立场。
              </span>
            </div>

            <!-- 评论列表 -->
            <table
              style="margin-top: 1rem; width: 100%; border: none"
              v-for="(user, index) in userList"
              :key="index"
            >
              <tr>
                <br />
                <td role="2" style="width: 50px; text-align: center">
                  <div>
                    <el-avatar
                      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    ></el-avatar>
                  </div>
                </td>
                <td>
                  <span>
                    <el-link
                      type="primary"
                      style="margin: 1rem; margin-left: 5px; margin-right: 0px"
                    >
                      <!-- 数据库留言用户 -->
                      {{ user.usersname }}
                      <!-- 用户省份 -->
                    </el-link>
                    <span style="font-size: 14px; color: #999">
                      [就爱{{ user.usersname }}网友]
                    </span>
                    <span style="float: right; font-size: 12px">
                      {{ user.Comments }}
                    </span>
                    <span style="float: right; margin-right: 1rem">
                      热门跟帖
                    </span>
                  </span>
                </td>
              </tr>
              <tr>
                <td></td>
                <td></td>
                <td>
                  <span>
                    {{ user.Comments }}
                  </span>
                </td>
              </tr>
            </table>

            <!-- 分页 -->
            <!-- <el-pagination
              style="text-align: center; margin-top: 1rem"
              :page-size="2"
              :pager-count="7"
              layout="prev, pager, next"
              :total="commentContent.length"
            >
            </el-pagination> -->
          </div>
        </el-card>
      </el-main>
      <el-footer style="text-align: right"> </el-footer>
    </el-container>
  </div>
</template>

<script>
import axios from "axios";
import marked from 'marked'
import { AddLike, LikeCount, getComment, getUserOne, AddComment, CommentCount, postRead, getRead } from "../api/user";
export default {
  data () {
    return {
      ArticlesFrom: [],
      ArticlesId: null,
      Userlikeone: {
        UsersId: null,
        ArticlesId: null,
      },
      ArticlesUserFrom: {
        UserlikeCount: null,
        CommentCounts: null,
        ArticlesRead: null
      },
      /** 合并前端 L */
      // 原始数据
      loginUserName: "",
      a: true,
      value: 0,
      username: "",
      password: "",
      url:
        "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",

      // 隐藏显示评论框
      i_show: true,
      e_show: false,

      // 评论表数据
      // currentPage: 1, //初始页
      // pagesize: 5, //    每页的数据
      // commentContent: [],
      userList: [],

      total: 0,
      input: "我是文章，",
      CommentsEvery: {
        CommentContent: null,
        UsersId: null,
        ArticlesId: null
      }


      ,
      journalismForm: [],
      circleUrl: "../assets/sugar.png",
      sizeList: ["large", "medium", "small"],
    };
  },
  methods: {
    getUsername: function () {
      // 获取本地存储的信息
      this.loginUserName= localStorage.getItem('username');
    },
    goBack: function () {
      this.$router.push("/");
    },
    clickExit: function () {
      alert('退出登录')
    },
    // 评论框显示事件
    changeShow: function () {
      this.i_show = false;
      this.e_show = true;
    },
    //跨页面获得key，根据key来得到数据详细内容
    getArticle: function () {
      this.ArticlesId = this.$route.params.key;
      console.log(this.ArticlesId);
      axios
        .get(`https://cms.zt118.top/article/GetOne/${this.ArticlesId}`)
        .then((res) => {
          if (res.data.data.isActived) {
            this.ArticlesFrom = res.data.data;
          }
          // 获取内容
          var markdowncontent = this.ArticlesFrom.articleContent
          // md转html
          this.ArticlesFrom.articleContent = marked(markdowncontent)
        })
        .catch();
    },
    //评论按钮
    CommentOne: function () {
      if (localStorage.getItem("accessToken") == null) {
        alert("请登录后再评论")
      } else {
        this.CommentsEvery.UsersId = parseInt(window.localStorage.getItem('id'));
        this.CommentsEvery.ArticlesId = parseInt(this.$route.params.key);
        console.log(this.CommentsEvery);

        AddComment(this.CommentsEvery).then((res) => {
          console.log(res);
          alert("评论成功");
          location.reload()

        }).catch();
      }

    },
    //点赞
    Userlike: function () {
      if (localStorage.getItem("accessToken") == null) {
        alert("请登录后再点赞");
      } else {
        if (window.localStorage.getItem("accessToken") == null) {
          alert("点过赞就不能再点赞了哦！");
        } else {
          this.Userlikeone.ArticlesId = parseInt(this.$route.params.key);
          this.Userlikeone.UsersId = parseInt(localStorage.getItem("id"));
          AddLike(this.Userlikeone)
            .then((res) => {
              if (res.data.code == 1002) {
                alert("抱歉，你已点过赞");
              } else {
                alert("点赞成功！！！");
                location.reload();

              }
            })
            .catch();
        }
      }
    },
    //点赞数
    UserlikeCount: function () {
      LikeCount(this.ArticlesId)
        .then((res) => {
          this.ArticlesUserFrom.UserlikeCount = res.data.data;
        })
        .catch();
    },
    //评论数
    CommentCount: function () {
      CommentCount(this.ArticlesId).then((res) => {
        this.ArticlesUserFrom.CommentCounts = res.data.data;
      })
    },

    //阅读人数
    ReadCount: function () {
      console.log(this.ArticlesId)
      getRead(this.ArticlesId).then(({ data }) => {
        console.log(data);
        this.ArticlesUserFrom.ArticlesRead = data.data
        console.log(this.ArticlesUserFrom.ArticlesRead)
      })
    },


    //初始化 currentPage , 初始化每页数据 pagesize 和 数据data
    handleSizeChange: function (size) {
      console.log(size);
      this.pagesize = size;
      console.log(this.pagesize);
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage);
    },
    //获得评论数组
    getListUser: function () {
      getComment(this.ArticlesId)
        .then((res) => {
          if (res.data.data != '') {
            res.data.data.forEach((item) => {
              getUserOne(item.usersId)
                .then((res) => {
                  this.userList.push({
                    usersId: item.usersId,
                    Comments: item.commentContent,
                    usersname: res.data.data.username,
                  });

                })
                .catch();
            });
          }

        })
        .catch();
    },
    AddRead () {
      this.Userlikeone.ArticlesId = parseInt(this.$route.params.key);
      postRead(this.Userlikeone).then((res) => {
        console.log(res);
      });
    }
  },
  mounted: function () {
    this.getArticle();
    this.UserlikeCount();
    this.getListUser();
    this.CommentCount();
    this.ReadCount();
    this.AddRead();
    this.getUsername();
  },
};
</script>

<style scoped>
table {
  border: solid 1px;
  border-radius: 4px;
  border-color: #eeeeeed5;
  background-color: white;
  margin: 0px;
  padding: 0px;
}
.comment_sty1 {
  text-align: right;
  background-color: #409eff;
  width: 15%;
  text-align: center;
  color: white;
  cursor: pointer;
}
.comment_sty2 {
  text-align: right;
  background-color: #409eff;
  width: 15%;
  text-align: center;
  color: white;
  cursor: pointer;
}
.comment_sty:hover {
  background-color: aliceblue;
}
/* 修改【.el-input_inner】样式需要在style样式定义处的【.el-input__inner】前加上【.类名 >>>】 */
/* 文章框架静态样式 */
.input-sty >>> .el-input__inner {
  border-top-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  border: none;
  /* color: rgb(236, 236, 236) */
}
/* 文章动态样式 */
.input-sty >>> .el-input__inner:focus {
  border: dashed 1px;
}

/* 评论框静态样式 */
.publish-sty >>> .el-input__inner {
  border-radius: 0px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  width: 100%;

  /* outline: none; k */
}
.publish-else-sty >>> .el-input__inner {
  border: none;
  border-bottom: none;
  height: 10rem;
  /* border: solid 1px #1b8dff; */
  line-height: 1rem;
  vertical-align: top;
}
.login_btn {
  /* border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px; */
  background-color: #409eff;
  margin: 0px;
  /* backgroud-color: #1b8dff; */
  color: white;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}

.articleStyle {
  border: none;
  user-select: none;
}

.articleStyle:hover {
  background-color: white;
}
/* 按钮被点击后，相当于焦点聚集在这个控件 */
.articleStyle:focus {
  background-color: white;
  /* font: outline; */
}
</style>
